<template>
	<!-- 组件的结构 -->
	<form>
		账号：<input type="text" v-model="userInfo.account"> <br><br>
		密码：<input type="password" v-model="userInfo.pwd"> <br><br>
		性别：男<input type="radio" name="sex" v-model="userInfo.gender" value="male">
					女<input type="radio" name="sex" v-model="userInfo.gender" value="female"> <br><br>
		爱好：抽烟 <input type="checkbox" v-model="userInfo.hobby" value="smoke">
					喝酒 <input type="checkbox" v-model="userInfo.hobby" value="drink">
					烫头 <input type="checkbox" v-model="userInfo.hobby" value="perm"> <br><br>
		所属校区：
					<select v-model="userInfo.city">
						<option value="">请选择校区</option>
						<option value="beijing">北京</option>
						<option value="shanghai">上海</option>
						<option value="shenzhen">深圳</option>
						<option value="wuhan">武汉</option>
						<option value="xian">西安</option>
					</select> <br><br>
		其他信息：<textarea v-model="userInfo.other"></textarea> <br><br>
		<input type="checkbox" v-model="userInfo.agree">阅读并接受 
		<a href="http://www.atguigu.com">《用户协议》</a> <br><br>
		<button @click.prevent="getInfo">提交</button>
	</form>
</template>

<script>
	//定义并暴露一个组件的配置
	export default {
		name:'App',
		data() {
			return {
				userInfo:{
					account:'',
					pwd:'',
					gender:'',
					hobby:[],
					city:'',
					other:'',
					agree:false
				}
			}
		},
		methods: {
			getInfo(){
				console.log(this.userInfo)
			}
		},
	}
</script>
